<template>
  <view class="material-outbound">
    <!-- 自定义导航栏 -->
    <cu-custom bgColor="bg-gradual-blue" :isBack="true">
      <block slot="content">
        <text class="nav-title">物料出库单</text>
      </block>
      <block slot="right">
        <view class="nav-right" @click="openFilterModal">
          <text class="cuIcon-filter"></text>
          <text class="filter-text">筛选</text>
        </view>
      </block>
    </cu-custom>

    <!-- 出库类型标签页 -->
    <view class="tabs-container">
      <scroll-view class="tabs-scroll" scroll-x="true">
        <view class="tabs-wrapper">
          <view
            v-for="tab in businessTypeTabs"
            :key="tab.value"
            class="tab-item"
            :class="{ active: activeTab === tab.value }"
            @click="switchTab(tab.value)"
          >
            <text class="tab-text">{{ tab.label }}</text>
            <view class="tab-indicator" v-if="activeTab === tab.value"></view>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 出库单列表 -->
    <view class="list-container">
      <view
        v-if="loading && outboundList.length === 0"
        class="loading-container"
      >
        <view class="loading-item" v-for="i in 3" :key="i">
          <view class="loading-header"></view>
          <view class="loading-content"></view>
        </view>
      </view>

      <view v-else-if="outboundList.length === 0" class="empty-container">
        <view class="empty-icon">📦</view>
        <text class="empty-text">暂无出库单数据</text>
      </view>

      <view v-else>
        <view
          v-for="item in outboundList"
          :key="item.id"
          class="list-item"
          @click="toggleExpand(item.id)"
        >
          <!-- 出库单基本信息 -->
          <view class="item-header">
            <view class="header-left">
              <view class="order-info">
                <text class="order-no">{{ item.outboundNo }}</text>
                <text class="business-no" v-if="item.businessNo">{{
                  item.businessNo
                }}</text>
              </view>
              <view class="order-meta">
                <text class="create-time">{{
                  formatDate(item.createTime)
                }}</text>
              </view>
            </view>
            <view class="header-right">
              <view
                class="expand-icon"
                :class="{ expanded: expandedItems.includes(item.id) }"
              >
                <text class="cuIcon-unfold"></text>
              </view>
            </view>
          </view>

          <view class="item-footer">
            <view class="footer-left">
              <text class="status-text" :class="item.statusClass">{{
                item.statusText
              }}</text>
              <text class="type-text" :class="item.orderTypeTextClass">{{
                item.businessTypeName
              }}</text>
            </view>
          </view>
          <view class="status-indicator" :class="item.orderTypeClass"></view>
          <view class="order-type-indicator" :class="item.statusClass"></view>

          <!-- 展开显示区域 -->
          <view class="item-details" v-if="expandedItems.includes(item.id)">
            <!-- 出库单基本信息 -->
            <view class="details-header">
              <text class="details-title">出库单信息</text>
            </view>
            <view class="detail-grid">
              <view class="detail-item">
                <text class="label">出库类型</text>
                <text class="value">{{ item.businessTypeName }}</text>
              </view>
              <view class="detail-item">
                <text class="label">出库日期</text>
                <text class="value">{{
                  formatDate(item.planOutboundTime)
                }}</text>
              </view>
              <view class="detail-item">
                <text class="label">关联订单</text>
                <text class="value">{{ item.orderNo || "无" }}</text>
              </view>
              <view class="detail-item">
                <text class="label">关联领料单</text>
                <text class="value">{{ item.requisitionNo || "无" }}</text>
              </view>
              <view class="detail-item">
                <text class="label">计划出库日期</text>
                <text class="value">{{
                  formatDate(item.outboundDate) || "暂无"
                }}</text>
              </view>
              <view class="detail-item">
                <text class="label">实际出库日期</text>
                <text class="value">{{
                  formatDate(item.actualOutboundDate) || "暂无"
                }}</text>
              </view>
            </view>

            <!-- 出库明细信息 -->
            <view class="details-header" style="margin-top: 24rpx">
              <text class="details-title">出库明细</text>
              <text
                class="details-count"
                v-if="item.details && item.details.length > 0"
              >
                共{{ item.details.length }}项
              </text>
            </view>
            <view class="details-content">
              <view
                v-if="!item.details || item.details.length === 0"
                class="no-details"
              >
                <text>暂无明细数据</text>
              </view>
              <view v-else>
                <!-- 按物料分组显示明细 -->
                <view
                  v-for="detail in item.details"
                  :key="detail.id"
                  class="detail-material-item"
                >
                  <!-- 物料基本信息 -->
                  <view class="material-header">
                    <view class="material-info">
                      <view class="material-main">
                        <text class="material-code">{{
                          detail.materialCode
                        }}</text>
                        <text class="material-name">{{
                          detail.materialName
                        }}</text>
                      </view>
                      <!-- 规格 、颜色  为空时显示为空字符串 -->
                      <text
                        class="material-spec"
                        v-if="detail.specification || detail.color"
                        >{{ detail.specification || "" }} |
                        {{ detail.color || "" }}</text
                      >
                    </view>
                    <view class="material-quantity">
                      <text class="quantity-label">出库数量</text>
                      <text class="quantity-value"
                        >{{ detail.quantity }}{{ detail.unit }}</text
                      >
                    </view>
                  </view>

                  <!-- 分配信息 -->
                  <view
                    class="allocation-info"
                    v-if="
                      detail.allocationPlans &&
                      detail.allocationPlans.length > 0
                    "
                  >
                    <view class="allocation-header">
                      <text class="allocation-title">分配方案</text>
                      <text class="allocation-summary"
                        >共{{ detail.allocationPlans.length }}个库位</text
                      >
                    </view>
                    <view
                      v-for="plan in detail.allocationPlans"
                      :key="plan.id"
                      class="allocation-item"
                    >
                      <view class="allocation-location">
                        <text class="warehouse-name">{{
                          plan.warehouseName
                        }}</text>
                        <text class="location-name">{{
                          plan.locationName
                        }}</text>
                      </view>
                      <view class="allocation-quantity">
                        <text class="allocated-amount"
                          >{{ plan.allocationQuantity }}{{ plan.unit }}</text
                        >

                        <view
                          class="allocation-status"
                          :class="plan.allocationStatusClass"
                        >
                          <text class="status-text">{{
                            plan.allocationStatusText
                          }}</text>
                        </view>
                      </view>
                    </view>
                  </view>

                  <!-- 库存不足提示 -->
                  <view
                    class="shortage-warning"
                    v-if="
                      detail.remainingQuantity && detail.remainingQuantity > 0
                    "
                  >
                    <view class="warning-icon">⚠️</view>
                    <view class="warning-content">
                      <text class="warning-title">库存不足</text>
                      <text class="warning-desc"
                        >缺少 {{ detail.remainingQuantity
                        }}{{ detail.unit }}，请及时补充库存</text
                      >
                    </view>
                  </view>
                </view>
              </view>
            </view>

            <!-- 操作按钮区域 -->
            <view class="action-buttons">
              <view
                v-if="
                  item.orderStatus === '已审核' ||
                  item.orderStatus === '部分出库'
                "
                class="action-btn execute-btn"
                @click.stop="executeOutbound(item)"
              >
                <text class="btn-text">执行出库</text>
              </view>
              <view
                class="action-btn collapse-btn"
                @click.stop="toggleExpand(item.id)"
              >
                <text class="cuIcon-fold"></text>
                <text class="btn-text">收起</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 筛选弹窗 -->
    <view
      class="filter-modal"
      v-if="showFilterModal"
      @click="showFilterModal = false"
    >
      <view class="filter-content" @click.stop>
        <view class="filter-header">
          <text class="filter-title">筛选条件</text>
          <view class="close-btn" @click="showFilterModal = false">
            <text class="cuIcon-close"></text>
          </view>
        </view>

        <view class="filter-body">
          <view class="filter-section">
            <view class="group-title">出库单号</view>
            <input
              class="input-field"
              placeholder="请输入出库单号"
              v-model="filterForm.outboundNo"
            />
          </view>

          <view class="filter-section">
            <view class="group-title">关联订单号</view>
            <input
              class="input-field"
              placeholder="请输入关联订单号"
              v-model="filterForm.orderNo"
            />
          </view>

          <view class="filter-section">
            <view class="group-title">关联领料单号</view>
            <input
              class="input-field"
              placeholder="请输入关联领料单号"
              v-model="filterForm.requisitionNo"
            />
          </view>

          <view class="filter-section">
            <view class="group-title">出库状态</view>
            <view class="checkbox-group">
              <view
                v-for="status in outboundStatuses"
                :key="status.value"
                class="checkbox-item"
                :class="{ checked: filterForm.statuses.includes(status.value) }"
                @click="toggleStatus(status.value)"
              >
                <text class="checkbox-text">{{ status.label }}</text>
              </view>
            </view>
          </view>
        </view>

        <view class="filter-footer">
          <view class="filter-btn reset" @click="resetFilter">重置</view>
          <view class="filter-btn confirm" @click="applyFilter">确定</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 标签页数据
      activeTab: "",
      businessTypeTabs: [
        { label: "全部", value: "" },
        { label: "销售出库", value: "1" },
        { label: "生产领料", value: "2" },
        { label: "调拨出库", value: "3" },
        { label: "其他出库", value: "4" },
      ],

      // 筛选
      showFilterModal: false,
      filterForm: {
        outboundNo: "",
        orderNo: "",
        requisitionNo: "",
        statuses: [],
      },

      // 出库状态选项
      outboundStatuses: [
        { label: "待审核", value: "1" },
        { label: "已审核", value: "2" },
        { label: "已出库", value: "3" },
        { label: "已驳回", value: "4" },
        { label: "部分出库", value: "5" },
      ],

      // 列表数据
      outboundList: [],
      expandedItems: [],
      loading: false,
      hasMore: true,
      pageNo: 1,
      pageSize: 10,
    };
  },

  onLoad() {
    this.loadOutboundData();
  },

  onShow() {
    this.loadOutboundData();
  },

  onPullDownRefresh() {
    this.refreshData();
  },

  methods: {
    // 切换标签页
    switchTab(tabValue) {
      this.activeTab = tabValue;
      this.refreshData();
    },

    // 获取当前筛选的出库类型
    getFilteredOutboundTypes() {
      if (this.activeTab === "") {
        return []; // 全部
      }
      return [this.activeTab];
    },

    // 加载出库单数据
    async loadOutboundData(isRefresh = false) {
      if (this.loading) return;

      this.loading = true;

      if (isRefresh) {
        this.pageNo = 1;
        this.outboundList = [];
        this.hasMore = true;
      }

      try {
        const outboundTypes = this.getFilteredOutboundTypes();
        const params = {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          outboundNo: this.filterForm.outboundNo,
          orderNo: this.filterForm.orderNo,
          requisitionNo: this.filterForm.requisitionNo,
          outboundType: outboundTypes.length > 0 ? outboundTypes[0] : undefined,
          status:
            this.filterForm.statuses.length > 0
              ? this.filterForm.statuses.join(",")
              : undefined,
        };

        const response = await this.$http.get("/wms/outbound/list", { params });

        if (response.data.success) {
          const newData = response.data.result?.records || [];
          const processedData = newData.map((record) => {
            return {
              id: record.id,
              outboundNo: record.outboundNo || "",
              businessNo: record.orderNo || "",
              statusName: this.mapStatus(record.status),
              businessTypeName: this.mapOutboundType(record.outboundType),
              planOutboundTime: record.outboundDate,
              actualOutboundTime: record.updateTime,
              orderStatus: this.mapStatus(record.status),
              orderType: record.outboundType,
              supplier: record.warehouseName || "无仓库",
              batchNo: record.outboundVoucher || "",
              createTime: record.createTime,
              createBy: record.createBy,
              operatorNames: record.updateBy || "",
              totalCost: 0,
              statusClass: this.calculateStatusClass(record.status),
              statusText: this.calculateStatusText(record.status),
              orderTypeClass: this.calculateOrderTypeClass(record.outboundType),
              orderTypeTextClass: this.calculateOrderTypeClass(
                record.outboundType
              ),
            };
          });

          if (isRefresh) {
            this.outboundList = processedData;
          } else {
            this.outboundList = [...this.outboundList, ...processedData];
          }

          this.hasMore = newData.length === this.pageSize;
          this.pageNo++;
        } else {
          const errorMessage = response.data.message || "加载失败";
          uni.showToast({
            title: errorMessage,
            icon: "none",
          });
        }
      } catch (error) {
        console.error("加载出库单数据失败:", error);
        uni.showToast({
          title: "网络错误",
          icon: "none",
        });
      } finally {
        this.loading = false;
        if (isRefresh) {
          uni.stopPullDownRefresh();
        }
      }
    },

    // 状态映射
    mapStatus(status) {
      const statusMap = {
        1: "待审核",
        2: "已审核",
        3: "已出库",
        4: "已驳回",
        5: "部分出库",
      };
      return statusMap[status] || "未知状态";
    },

    // 出库类型映射
    mapOutboundType(outboundType) {
      const typeMap = {
        1: "销售出库",
        2: "生产领料",
        3: "调拨出库",
        4: "其他出库",
      };
      return typeMap[outboundType] || "未知类型";
    },

    // 计算状态样式类
    calculateStatusClass(status) {
      const classMap = {
        1: "status-pending",     // 待审核
        2: "status-approved",    // 已审核
        3: "status-completed",   // 已出库
        4: "status-rejected",    // 已驳回
        5: "status-partial",     // 部分出库
      };
      return classMap[status] || "status-unknown";
    },

    // 计算状态文本
    calculateStatusText(status) {
      return this.mapStatus(status);
    },

    // 计算出库类型样式类
    calculateOrderTypeClass(outboundType) {
      const classMap = {
        1: "type-purchase-out",
        2: "type-production-out",
        3: "type-transfer-out",
        4: "type-other-out",
      };
      return classMap[outboundType] || "type-other";
    },

    // 刷新数据
    refreshData() {
      this.loadOutboundData(true);
    },

    // 切换展开状态
    async toggleExpand(itemId) {
      const index = this.expandedItems.indexOf(itemId);
      if (index > -1) {
        this.expandedItems.splice(index, 1);
      } else {
        this.expandedItems.push(itemId);

        // 检查是否已经加载过详细数据
        const item = this.outboundList.find((item) => item.id === itemId);
        if (!item.details || item.details.length === 0) {
          // 加载详细数据
          await this.loadOutboundDetails(itemId);
        }
      }
    },

    // 加载出库单详细数据
    async loadOutboundDetails(outboundId) {
      try {
        uni.showLoading({ title: "加载详情中..." });

        const response = await this.$http.get(
          `/wms/outbound/detail/${outboundId}`
        );
        if (response.data && response.data.success) {
          // 找到对应的出库单并更新详细数据
          const item = this.outboundList.find((item) => item.id === outboundId);
          if (item) {
            const result = response.data.result;

            // 更新出库单基本信息
            if (result.outbound) {
              Object.assign(item, {
                orderNo: result.outbound.orderNo,
                requisitionNo: result.outbound.requisitionNo,
                outboundDate: result.outbound.outboundDate,
                actualOutboundDate: result.outbound.actualOutboundDate,
                remark: result.outbound.remark,
                warehouseName: result.outbound.warehouseName,
                locationName: result.outbound.locationName,
              });
            }

            // 处理出库明细数据
            const details = result.details || [];
            const allocationPlans = result.allocationPlans || [];

            // 为每个明细匹配对应的分配计划
            const processedDetails = details.map((detail) => {
              // 找到该明细对应的所有分配计划
              const detailPlans = allocationPlans.filter(
                (plan) =>
                  plan.materialCode === detail.materialCode &&
                  plan.specification === detail.specification &&
                  plan.color === detail.color
              );

              return {
                ...detail,
                // 添加分配计划信息
                allocationPlans: detailPlans.map((plan) => ({
                  ...plan,
                  allocationStatusClass: this.getPlanStatusClass(plan),
                  allocationStatusText: this.getPlanStatusText(plan),
                })),
              };
            });

            // 使用$set确保Vue能正确检测到数据变化
            this.$set(item, "details", processedDetails);

            // 强制触发视图更新
            this.$forceUpdate();
          }
        }
      } catch (error) {
        console.error("加载出库详情失败:", error);
        uni.showToast({
          title: "加载详情失败",
          icon: "none",
        });
      } finally {
        uni.hideLoading();
      }
    },

    // 格式化日期
    formatDate(dateStr) {
      if (!dateStr) return "暂无";
      const date = new Date(dateStr);
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(
        2,
        "0"
      )}-${String(date.getDate()).padStart(2, "0")}`;
    },

    // 打开筛选弹窗
    openFilterModal() {
      this.showFilterModal = true;
    },

    // 切换状态筛选
    toggleStatus(statusValue) {
      const index = this.filterForm.statuses.indexOf(statusValue);
      if (index > -1) {
        this.filterForm.statuses.splice(index, 1);
      } else {
        this.filterForm.statuses.push(statusValue);
      }
    },

    // 重置筛选
    resetFilter() {
      this.filterForm = {
        outboundNo: "",
        orderNo: "",
        requisitionNo: "",
        statuses: [],
      };
    },

    // 应用筛选
    applyFilter() {
      this.showFilterModal = false;
      this.refreshData();
    },

    // 执行出库
    executeOutbound(item) {
      uni.navigateTo({
        url: `/pages/wms/material/outbound-execute?outboundOrderId=${item.id}&outboundNo=${item.outboundNo}`,
      });
    },

    // 获取分配状态样式类
    getAllocationStatusClass(status) {
      const classMap = {
        0: "allocation-pending",
        1: "allocation-allocated",
        2: "allocation-completed",
      };
      return classMap[status] || "allocation-unknown";
    },

    // 获取分配状态文本
    getAllocationStatusText(status) {
      const statusMap = {
        0: "待分配",
        1: "已分配",
        2: "已完成",
      };
      return statusMap[status] || "未知状态";
    },

    // 获取方案状态样式类（优先显示出库状态）
    getPlanStatusClass(plan) {
      if (plan.status === 1) {
        return "allocation-outbound"; // 已出库
      }
      return this.getAllocationStatusClass(plan.allocationStatus);
    },

    // 获取方案状态文本（优先显示出库状态）
    getPlanStatusText(plan) {
      if (plan.status === 1) {
        return "已出库";
      }
      return this.getAllocationStatusText(plan.allocationStatus);
    },
  },
};
</script>

<style lang="scss" scoped>
// 基础样式
.material-outbound {
  background: #f5f7fa;
  min-height: 100vh;
}

// 自定义导航栏样式
.nav-title {
  font-size: 36rpx;
  font-weight: 600;
  color: white;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 8rpx 16rpx;

  .filter-text {
    font-size: 28rpx;
    color: white;
  }
}

// 标签页样式
.tabs-container {
  background: white;
  border-bottom: 1rpx solid #f0f0f0;
}

.tabs-scroll {
  white-space: nowrap;
}

.tabs-wrapper {
  display: flex;
  padding: 0 24rpx;
}

.tab-item {
  position: relative;
  flex-shrink: 0;
  padding: 24rpx 32rpx;
  margin-right: 16rpx;
  cursor: pointer;
  transition: all 0.3s ease;

  &.active {
    .tab-text {
      color: #007aff;
      font-weight: 600;
    }
  }
}

.tab-text {
  font-size: 28rpx;
  color: #666;
  white-space: nowrap;
}

.tab-indicator {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 4rpx;
  background: #007aff;
  border-radius: 2rpx;
}

// 列表样式
.list-container {
  padding: 24rpx;
}

.loading-container {
  .loading-item {
    background: white;
    border-radius: 16rpx;
    padding: 24rpx;
    margin-bottom: 16rpx;

    .loading-header {
      height: 40rpx;
      background: #f0f0f0;
      border-radius: 8rpx;
      margin-bottom: 16rpx;
    }

    .loading-content {
      height: 24rpx;
      background: #f0f0f0;
      border-radius: 8rpx;
      width: 60%;
    }
  }
}

.empty-container {
  text-align: center;
  padding: 120rpx 0;

  .empty-icon {
    font-size: 120rpx;
    margin-bottom: 24rpx;
  }

  .empty-text {
    font-size: 28rpx;
    color: #999;
  }
}

.list-item {
  background: white;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 16rpx;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;

  &:active {
    background: #f8f9fa;
  }
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16rpx;
}

.header-left {
  flex: 1;
}

.order-info {
  margin-bottom: 8rpx;
}

.order-no {
  font-size: 32rpx;
  font-weight: 600;
  color: #2c3e50;
  margin-right: 16rpx;
}

.business-no {
  font-size: 24rpx;
  color: #999;
  background: #f0f0f0;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
}

.order-meta {
  display: flex;
  flex-direction: column;
  gap: 4rpx;
}

.supplier {
  font-size: 26rpx;
  color: #666;
}

.create-time {
  font-size: 24rpx;
  color: #999;
}

.header-right {
  .expand-icon {
    font-size: 32rpx;
    color: #007aff;
    transition: transform 0.3s ease;

    &.expanded {
      transform: rotate(180deg);
    }
  }
}

.item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-left {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.status-text {
  font-size: 24rpx;
  padding: 6rpx 16rpx;
  border-radius: 16rpx;
  font-weight: 500;

  &.status-pending {
    background: #fff3cd;
    color: #856404;
  }

  &.status-approved {
    background: #cce5ff;
    color: #004085;
  }

  &.status-completed {
    background: #d4edda;
    color: #155724;
  }

  &.status-rejected {
    background: #f8d7da;
    color: #721c24;
  }

  &.status-partial {
    background: #cce5ff;
    color: #004085;
  }
}

.type-text {
  font-size: 24rpx;
  font-weight: 600;

  &.type-purchase-out {
    color: #d32f2f;
  }

  &.type-production-out {
    color: #1b5e20;
  }

  &.type-transfer-out {
    color: #4a148c;
  }

  &.type-other-out {
    color: #424242;
  }
}

.cost-text {
  font-size: 28rpx;
  font-weight: 600;
  color: #e74c3c;
}

// 状态指示器
.status-indicator {
  position: absolute;
  top: 16rpx;
  right: 16rpx;
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;

  &.type-purchase-out {
    background: #d32f2f;
  }

  &.type-production-out {
    background: #1b5e20;
  }

  &.type-transfer-out {
    background: #4a148c;
  }

  &.type-other-out {
    background: #424242;
  }
}

.order-type-indicator {
  position: absolute;
  bottom: 16rpx;
  right: 16rpx;
  width: 8rpx;
  height: 8rpx;
  border-radius: 50%;

  &.status-pending {
    background: #ff9500;
  }

  &.status-approved {
    background: #007aff;
  }

  &.status-partial {
    background: #007aff;
  }

  &.status-completed {
    background: #34c759;
  }

  &.status-rejected {
    background: #ff3b30;
  }
}

// 详情展开区域
.item-details {
  border-top: 1rpx solid #f0f0f0;
  padding-top: 24rpx;
  margin-top: 16rpx;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16rpx;
  margin-bottom: 24rpx;
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.label {
  font-size: 24rpx;
  color: #999;
}

.value {
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
}

// 操作按钮区域
.action-buttons {
  display: flex;
  gap: 16rpx;
  justify-content: flex-end;
  padding-top: 16rpx;
  border-top: 1rpx solid #f0f0f0;
}

.action-btn {
  padding: 12rpx 24rpx;
  border-radius: 20rpx;
  font-size: 26rpx;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.execute-btn {
  background: #007aff;
  color: white;

  &:active {
    background: #0056b3;
    transform: scale(0.95);
  }
}

.btn-text {
  color: inherit;
}

.collapse-btn {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 8rpx 16rpx;
  color: #666;
  cursor: pointer;
  transition: color 0.3s ease;

  &:active {
    color: #007aff;
  }
}

// 筛选弹窗样式
.filter-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  align-items: flex-end;
}

.filter-content {
  width: 100%;
  background: white;
  border-radius: 24rpx 24rpx 0 0;
  max-height: 80vh;
  overflow: hidden;
}

.filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx 24rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.filter-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.close-btn {
  font-size: 32rpx;
  color: #999;
  cursor: pointer;
}

.filter-body {
  padding: 24rpx;
  max-height: 60vh;
  overflow-y: auto;
}

.filter-section {
  margin-bottom: 32rpx;
}

.group-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 16rpx;
}

.input-field {
  width: 100%;
  padding: 16rpx;
  border: 1rpx solid #e0e0e0;
  border-radius: 8rpx;
  font-size: 28rpx;
  background: #fafafa;
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.checkbox-item {
  padding: 12rpx 24rpx;
  border: 1rpx solid #e0e0e0;
  border-radius: 24rpx;
  cursor: pointer;
  transition: all 0.3s ease;

  &.checked {
    background: #007aff;
    border-color: #007aff;

    .checkbox-text {
      color: white;
    }
  }
}

.checkbox-text {
  font-size: 26rpx;
  color: #666;
  transition: color 0.3s ease;
}

.filter-footer {
  display: flex;
  padding: 24rpx;
  gap: 16rpx;
  border-top: 1rpx solid #f0f0f0;
}

.filter-btn {
  flex: 1;
  padding: 16rpx;
  text-align: center;
  border-radius: 8rpx;
  font-size: 28rpx;
  cursor: pointer;

  &.reset {
    background: #f5f5f5;
    color: #666;
  }

  &.confirm {
    background: #007aff;
    color: white;
  }
}

// 详情展示样式
.details-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
  padding-bottom: 12rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.details-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
}

.details-count {
  font-size: 24rpx;
  color: #666;
}

.no-details {
  text-align: center;
  padding: 40rpx 0;
  color: #999;
  font-size: 26rpx;
}

// 物料明细样式
.detail-material-item {
  background: #f8f9fa;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 16rpx;

  &:last-child {
    margin-bottom: 0;
  }
}

.material-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16rpx;
}

.material-info {
  flex: 1;
}

.material-main {
  display: flex;
  flex-direction: column;
  gap: 4rpx;
  margin-bottom: 8rpx;
}

.material-code {
  font-size: 28rpx;
  font-weight: 600;
  color: #2c3e50;
}

.material-name {
  font-size: 26rpx;
  color: #666;
}

.material-spec {
  font-size: 24rpx;
  color: #999;
}

.material-quantity {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.quantity-label {
  font-size: 22rpx;
  color: #999;
  margin-bottom: 4rpx;
}

.quantity-value {
  font-size: 28rpx;
  font-weight: 600;
  color: #e74c3c;
}

// 分配信息样式
.allocation-info {
  margin-top: 16rpx;
}

.allocation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;
}

.allocation-title {
  font-size: 24rpx;
  font-weight: 600;
  color: #666;
}

.allocation-summary {
  font-size: 22rpx;
  color: #999;
}

.allocation-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  border-radius: 8rpx;
  padding: 16rpx;
  margin-bottom: 8rpx;

  &:last-child {
    margin-bottom: 0;
  }
}

.allocation-location {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.warehouse-name {
  font-size: 26rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 4rpx;
}

.location-name {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 2rpx;
}

.batch-info {
  font-size: 22rpx;
  color: #999;
  margin-bottom: 2rpx;
}

.available-info {
  font-size: 22rpx;
  color: #007aff;
  font-weight: 500;
}

.allocation-quantity {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.allocated-amount {
  font-size: 26rpx;
  font-weight: 600;
  color: #007aff;
  margin-bottom: 6rpx;
}

.allocation-status {
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  font-size: 20rpx;

  &.allocation-pending {
    background: #fff3cd;
    color: #856404;
  }

  &.allocation-allocated {
    background: #cce5ff;
    color: #004085;
  }

  &.allocation-completed {
    background: #d4edda;
    color: #155724;
  }

  &.allocation-outbound {
    background: #d4edda;
    color: #155724;
  }
}

// 库存不足警告样式
.shortage-warning {
  display: flex;
  align-items: flex-start;
  background: #fff3cd;
  border: 1rpx solid #ffeaa7;
  border-radius: 8rpx;
  padding: 16rpx;
  margin-top: 16rpx;
}

.warning-icon {
  font-size: 32rpx;
  margin-right: 12rpx;
}

.warning-content {
  flex: 1;
}

.warning-title {
  font-size: 26rpx;
  font-weight: 600;
  color: #856404;
  margin-bottom: 4rpx;
}

.warning-desc {
  font-size: 24rpx;
  color: #856404;
  line-height: 1.4;
}
</style>
